<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="${webroot}">
    <title>${login_page_title!"rbac"}</title>
    
	<link rel="stylesheet" href="${webroot}res/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="${webroot}res/bootstrap3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${webroot}res/rbac/css/login.css" rel="stylesheet">
    
    <script src="${webroot}res/bootstrap3.3.4/assets/js/ie-emulation-modes-warning.js"></script>
    <style type="text/css">
		.form-bg{
		    background: #00b4ef;
		    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */  
	    	filter: blur(5px);  
		}
		.form-horizontal{
		    padding-bottom: 40px;
		    border-radius: 15px;
		    text-align: center;
		    background: rgba(255,255,255,0.3);
		}
		.form-horizontal .heading{
		    display: block;
		    font-size: 35px;
		    font-weight: 700;
		    padding: 35px 0;
		    border-bottom: 1px solid #f0f0f0;
		    margin-bottom: 30px;
		    color:#ab213a;
		}
		.form-horizontal .form-group{
		    padding: 0 40px;
		    margin: 0 0 25px 0;
		    position: relative;
		}
		.form-horizontal .form-control{
		    background: #f0f0f0;
		    border: none;
		    border-radius: 20px;
		    box-shadow: none;
		    padding: 0 20px 0 45px;
		    height: 40px;
		    transition: all 0.3s ease 0s;
		}
		.form-horizontal .form-control:focus{
		    background: #e0e0e0;
		    box-shadow: none;
		    outline: 0 none;
		}
		.form-horizontal .form-group i{
		    position: absolute;
		    top: 12px;
		    left: 60px;
		    font-size: 17px;
		    color: #c8c8c8;
		    transition : all 0.5s ease 0s;
		}
		.form-horizontal .form-control:focus + i{
		    color: #00b4ef;
		}
		.form-horizontal .fa-question-circle{
		    display: inline-block;
		    position: absolute;
		    top: 12px;
		    right: 60px;
		    font-size: 20px;
		    color: #808080;
		    transition: all 0.5s ease 0s;
		}
		.form-horizontal .fa-question-circle:hover{
		    color: #000;
		}
		.form-horizontal .main-checkbox{
		    float: left;
		    width: 20px;
		    height: 20px;
		    background: #11a3fc;
		    border-radius: 50%;
		    position: relative;
		    margin: 5px 0 0 5px;
		    border: 1px solid #11a3fc;
		}
		.form-horizontal .main-checkbox label{
		    width: 20px;
		    height: 20px;
		    position: absolute;
		    top: 0;
		    left: 0;
		    cursor: pointer;
		}
		.form-horizontal .main-checkbox label:after{
		    content: "";
		    width: 10px;
		    height: 5px;
		    position: absolute;
		    top: 5px;
		    left: 4px;
		    border: 3px solid #fff;
		    border-top: none;
		    border-right: none;
		    background: transparent;
		    opacity: 0;
		    -webkit-transform: rotate(-45deg);
		    transform: rotate(-45deg);
		}
		.form-horizontal .main-checkbox input[type=checkbox]{
		    visibility: hidden;
		}
		.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
		    opacity: 1;
		}
		.form-horizontal .text{
		    float: left;
		    margin-left: 7px;
		    line-height: 20px;
		    padding-top: 5px;
		    text-transform: capitalize;
		}
		.form-horizontal .btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #ff5d5c;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		    width:150px;
		}
		@media only screen and (max-width: 479px){
		    .form-horizontal .form-group{
		        padding: 0 25px;
		    }
		    .form-horizontal .form-group i{
		        left: 45px;
		    }
		    .form-horizontal .btn{
		        padding: 10px 20px;
		    }
		}
		
		.htmleaf-container{
			margin: 0 auto;
		}
		body{
			font-weight: 500;
			font-size: 1.05em;
			font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif,微软雅黑;
		}
        .bg {
            background: url('${webroot}res/img/bg.png');
            text-align: center;
            height:1024px;
        }
        .bg-blur {
            float: left;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(2px);
        }
        .container{
        	
        	position:absolute;
        	top:100px;
          left: 10px;
          right: 10px;
        }
        html { overflow-x: hidden; overflow-y: hidden; }
        
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	    background-color: rgb(250, 255, 189);
	    background-image: none;
	    color: rgb(0, 0, 0);
	}
	</style>
    
  </head>

  <body>
  <div>
  <div class="bg bg-blur"></div>
    <div class="container">
       <div class="row">
		    <div class="col-md-offset-3 col-md-6">
		        <form class="form-horizontal" method="post" action="${webroot}signin.do">
				      <#if msg ??>
				      	<!-- <div class="alert alert-danger alert-dismissible" role="alert">
						  	  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
							  <span class="sr-only">Error:</span>
							  ${msg!""}
						 </div> -->
						 <div class="alert alert-warning" id="alertwarning" style="position: absolute;left:20px;top:100px;width:93%;margin:0 auto;">  
					        <strong>警告！</strong> ${msg!""}
					     </div> 
					     <script type="text/javascript">
					    // document.getElementById("alertwarning").style.visibility="visible";//隐藏 
					     function hidden(){					    	 
					    	 document.getElementById("alertwarning").style.visibility="hidden";//隐藏 
					     }
					     window.setTimeout(hidden,3000);
					     </script>
				      </#if>
			      	<span class="label label-danger"></span>
			        <span class="heading">${login_page_title!"请登录"}</span>   
			        <div class="form-group">
			        	<input id="inputAccount"  name="account" class="form-control" placeholder="帐号" autocomplete="off" required autofocus>
			        	<i class="fa fa-user"></i>
			        </div>
			        <div class="form-group">
			        	<input type="password" id="inputPassword" name="password" class="form-control"  placeholder="密码" autocomplete="off" required>
			       		<i class="fa fa-lock"></i>
			        </div>
			        <div class="form-group">
			        	<div class="col-xs-7" style="padding: 0;">
			        		<input  id="vcode" name="vcode" class="form-control" type="text" placeholder="验证码" autocomplete="off"  required>
			        		<i class="fa fa-check" style="position: absolute;left:16px;top:10px;"></i>
			        	</div>
			        	 <img alt="验证码" title="看不清换一张，请单击我。"  src="${webroot}vcode.do" id="vcode" style="cursor: pointer;float:right;" class="img-rounded" onclick="reloadVcode(this);">
			        </div>
			        <div class="form-group">
			           <div class="main-checkbox">
                         <input type="checkbox" value="true" id="checkbox1" name="isRemember">
                         <label for="checkbox1"></label>
		               </div>
		               <span class="text" style="font-size:15px;">3天内免登录</span>
		               <button  class="btn  btn-primary" type="submit">登录</button>			        
			        </div>        
      			</form>
</div>
</div>
    </div> 
</div>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="${webroot}res/bootstrap3.3.4/assets/js/ie10-viewport-bug-workaround.js"></script>

  </body>
  <script type="text/javascript">
	window.onload=function(){
		  if (self.frameElement && self.frameElement.tagName == "IFRAME") {
			  window.parent.location.href="signin.do";
			  }
	}
		function reloadVcode(obj){
			obj.src='${webroot}vcode.do?'+Date.parse(new Date());
		}
		<#--
		function login() {
			var isValid = true;
			$("input.text-input").each(function(i) {
				if (!$(this).val()) {
					$('#info').html('请填写' + $(this).attr('info'));
					isValid = false;
					return false;
				}
			});
			if (!isValid){
				return;
			}
			
			$.ajax({
				url : 'login.do',
				type : 'POST',
				dataType : 'json',
				data : $('#loginfom').serialize(),
				success : function(msg) {
					if (msg.status == false) {
						$('#info').html('账号或密码错误');
					} else {
						location.href = 'main.do';
					}
				}
			});
		}
		-->
	</script>
</html>
